<template >
    <ul ref="rightMenu" class="right-menu">
        <li v-for="item in lists" @click="itemCLickHandler(item.key)">{{item.title}}</li>
    </ul>
</template>

<script setup>
    import {GlobalVariables} from "../../GlobalVariables";
    import {onMounted, onUnmounted, ref,reactive} from "vue";
    import {AMapUtil} from "../../utils/AMapUtil";

    const rightMenu = ref(null);
    const isShow = ref(false);
    let contextMenu = null;
    const lists= reactive([
        {
            title:"定位",
            key:"location"
        },
        {
            title:"停车位指引",
            key:"ParkingSpaceGuide"
        }
    ])
    function rightclick(e) {
        if (contextMenu) {
            rightMenu.value.style.display = "block";
            contextMenu.open(GlobalVariables.map, e.lnglat);
        }
    }

    function itemCLickHandler(key){
        if (contextMenu) {
            contextMenu.close();
        }
        if(key === "location"){
            GlobalVariables.map.setZoomAndCenter(18, GlobalVariables.curPosition);
        }else if(key === "ParkingSpaceGuide"){//路线指引
            AMapUtil.clearParkingSpotCluster();
            AMapUtil.PlaceSearch(GlobalVariables.curPosition,500);
        }

    }
    onMounted(() => {
        rightMenu.value.style.display = "none";
        contextMenu = new AMap.ContextMenu({isCustom: true, content: rightMenu.value});
        //地图绑定鼠标右击事件——弹出右键菜单
        GlobalVariables.map.on('rightclick', rightclick);
    })
    onUnmounted(() => {
        GlobalVariables.map.off('rightclick', rightclick)
        contextMenu = null;
    })
</script>

<style scoped lang="less">
    .right-menu {
        width: 1.5rem;
        background-color: #304a4f;
        text-align: center;
        li{
            padding: 0.1rem 0.05rem;
            cursor: pointer;
            font-size: 0.16rem;
            &:hover{
                background-color: #1e2d2e;
            }
        }
    }
</style>